{% extends "base.html" %}
{% block main %}
<div class="container">
  <nav class="breadcrumb has-succeeds-separator mmx-3 my-3" aria-label="breadcrumbs">
    <ul>
      <li>
        <a href="/" class="has-text-info">
          <span class="icon is-small">
            <i class="fas fa-home" aria-hidden="true"></i>
          </span>
          <span>主页</span>
        </a>
      </li>
      <li class="is-active">
        <a href="/messages">
          <span class="icon is-small has-text-success">
            <i class="fas fa-comment-dots" aria-hidden="true"></i>
          </span>
          <span>留言板</span>
        </a>
      </li>
    </ul>
  </nav>
  <div class="my-3 mmx-3">
    <div class="field">
      <div class="control">
        <textarea id="mContent" class="textarea" placeholder="单条留言最多200字" rows="3" maxlength="200"></textarea>
      </div>
    </div>
    <div class="field">
      <div class="control has-text-right has-text-centered-mobile">
        <button id="messages_add" class="button is-primary">
          <span class="icon is-small">
            <i class="fas fa-comment"></i>
          </span>
          <span>留言</span>
        </button>
      </div>
    </div>
  </div>
  <div class="my-3 mmx-3">
  {% for message in messages %}
    <div class="box">
      <article class="media">
        <div class="media-content">
          <div class="content">
            <p>
              <strong class="mr-2">{{ message.user.username }}</strong>
              <small><time class="datetime">{{ message.upload_time }}</time></small>
              <br>
              <span class="cp">{{ message.content }}</span>
            </p>
          </div>
        </div>
      </article>
    </div>
  {% endfor %}
  </div>
</div>
{% endblock %}

{% block js %}
<script src="/static/js/messages.js"></script>
{% endblock %}